<template>
  <div>
    <van-cell title="员工授权" icon="setting-o"></van-cell>
    <van-form @submit="onSubmit">
      <van-field
        readonly
        clickable
        name="name"
        :value="form.name"
        label="员工姓名"
        placeholder="点击员工姓名"
        required
        @click="showPicker = true"
        :rules="[{ required: true, message: '请选择员工姓名' }]"
      />
      <van-field
        name="role"
        label="角色名称"
        required
        :rules="[{ required: true, message: '请选择角色' }]"
      >
        <template #input>
          <van-radio-group v-model="form.role">
            <van-radio
              v-for="item in roles"
              :name="item.id"
              :key="item.id"
              @click="radioClick"
              >{{ item.name }}</van-radio
            >
          </van-radio-group>
        </template>
      </van-field>
      <div style="margin: 32px 64px">
        <van-button round block type="info" native-type="submit"
          >授权</van-button
        >
      </div>
    </van-form>
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
        title="员工列表"
        show-toolbar
        :columns="employees"
        value-key="nickname"
        @confirm="onEmployeeConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
  </div>
</template>

<script>

import { getWxRoles, getWxUserList, addEmployee } from "@/api/member";

export default {
  name: "EmployeePerm",
  components: {},

  data() {
    return {
      title: this.$route.meta.title,
      roles: [],
      showPicker: false,
      flag: "",
      minDate: new Date(),
      employees: [],

      form: {
        openid: "",
        name: "",
        role: null,
      },
    };
  },
  mounted() {
    this.getWxRoleList();
    this.getWxUsers();
  },
  methods: {
    getWxUsers(){
      getWxUserList().then(res=>{
        this.employees = res.data;
      })
    },

    getWxRoleList() {
      getWxRoles()
        .then((res) => {
          this.roles = res.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },

    onEmployeeConfirm(value) {
      this.form.openid = value.openid;
      this.form.name = value.nickname;
      this.showPicker = false;
    },

    onSubmit(values) {
      console.log(this.form, values);
      addEmployee(this.form).then(res=>{
        if(res.data.id > 0){
          this.$toast("授权成功！");
          this.form.openid = "";
          this.form.name = "";
          this.form.role = null;
        }
      }).catch(()=>{
        this.$toast("授权失败")
      })

    },

    radioClick(event) {
      console.log(event);
    },

  },
};
</script>

<style  scoped>

.van-field__label {
  color: black;
}
.van-radio {
  padding: 10px;
}
</style>